<template>
  <div class="main-navbar">
    <div :class="[menu_width == 'MAX' ? 'title_MAX' : 'title_MIN']">
      <span v-if="menu_width == 'MAX'">云音乐后台管理系统</span>
      <span v-else>云音乐</span>
    </div>
    <div
      :class="[menu_width == 'MAX' ? 'navbar_event_MAX' : 'navbar_event_MIN']"
    >
      <img
        src="@/assets/img/common/menu_icon.png"
        @click="menuSize()"
        class="menu_icon"
      />
      <!-- <div class="laber">
        <Lable v-for="index in 10" :key="index"></Lable>
      </div> -->
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs, watch } from "vue";
import { useStore } from "vuex";
import Lable from '../../components/common/lable.vue'
export default {
  setup() {
    const state = reactive({
      menu_width: "",
      tags: [
        { name: "标签一", type: "" },
        { name: "标签二", type: "" },
        { name: "标签三", type: "" },
        { name: "标签四", type: "" },
        { name: "标签五", type: "" },
      ],
    });
    const Store = useStore();
    //点击菜单icon切换菜单栏尺寸
    const menuSize = () => {
      if (Store.state.common.menu_width == "MAX") {
        Store.commit("common/setMenu_width", "MIN");
      } else {
        Store.commit("common/setMenu_width", "MAX");
      }
    };
    onMounted: {
      state.menu_width = Store.state.common.menu_width;
    }
    watch(
      () => Store.state.common.menu_width,
      (newValue, oldValue) => {
        state.menu_width = Store.state.common.menu_width;
      }
    );
    return { ...toRefs(state), menuSize };
  },
  components:{Lable}
};
</script>
<style lang="less" scoped>
.main-navbar {
  height: 50px;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  .laber {
    display: flex;
    width: 90%;
    position: absolute;
    left: 70px;
    bottom: 10px;
    .lable{
      margin-right: 10px;
    }
  }
  .title {
    background-color: @subject_green;
    color: #fff;
    font-weight: 600;
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .title_MAX {
    width: @menu_width_MAX;
    .title();
  }
  .title_MIN {
    width: @menu_width_MIN;
    .title();
  }
  .navbar_event_MAX {
    width: calc(100% - @menu_width_MAX);
    .navbar_event();
  }
  .navbar_event_MIN {
    width: calc(100% - @menu_width_MIN);
    .navbar_event();
  }
  .navbar_event {
    background-color: #fff;
    position: relative;
    .el-breadcrumb {
      position: absolute;
      top: 18px;
      left: 60px;
    }
    .menu_icon {
      position: absolute;
      left: 20px;
      height: 18px;
      width: 25px;
      top: 16px;
    }
  }
}
</style>